<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <!-- 
        当我们屏幕大于等于640px以上的，我们让div一行显示2个
        当我们屏幕小于640我们让div一行显示一个
        一个建议:我们媒体查询最好的方法是从小到大
        引入资源就是针对于不同的屏幕尺寸调用不同的css文件
    -->
    <link rel="stylesheet" media="screen and (min-width:640px)" href="./css/style320.css">
    <link rel="stylesheet" media="screen and (min-width:1000px)" href="./css/style640.css">
</head>
<body>

    <!-- 

    2.4引入资源（理解)

        当样式比较繁多的时候，我们可以针对不同的媒体使用不同stylesheets(样式表)。
        原理，就是直接在link中判断设备的尺寸，然后引用不同的css文件。

        1.语法规范

        <link rel="stylesheet" media="mediatype and | not | only (media feature)" href="mystylesheet.css">

     -->
    
    <div>1</div>
    <div>2</div>
</body>
</html>